<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$store_title}</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/public/mobile/css/common.css">
    <link rel="stylesheet" href="/public/mobile/css/index.css">
</head>
<body class="rank" style="overflow: hidden;position: relative;">
    <header class="title">
        <img src="/public/mobile/img/logo.png" class="logo" alt="">
    </header>
    <div class="content">
        <img src="/public/mobile/img/hot_rank.png" class="title_img" alt="">
        <div class="head">
            <ul>
                <li class="num">排名</li><li class="name">姓名</li><li class="energy">火热能量</li>
            </ul>
        </div>
        <!--<div class="line_box" style="position: relative;height:1px;width:100%;">
            <div class="line1"></div>
            <div class="line2"></div>
        </div>-->
        <div class="rank_box">
            <ul id="rankBox">
                <!--<li><div class="num">No.1</div><div class="name">XXX</div> <div class="energy">XXX</div></li>-->
            </ul>
        </div>
        <div class="center">
            如遇分数相同，以参与时间先后顺序为准进行排名。
        </div>
        <div class="btn_box">
            <img src="/public/mobile/img/game_again.png" class="again" id="again" alt="">
            <img src="/public/mobile/img/share.png" alt="" class="share" id="share">
        </div>
        <img src="/public/mobile/img/bird.png" class="bird" alt="" style="position: absolute;">
    </div>
    <img src="/public/mobile/img/person.png" class="person" alt="">
    <div class="share_box hide">
        <img src="/public/mobile/img/share_icon.png" class="icon_share" alt="">
    </div>
<script src="/public/mobile/js/jquery.min.js"></script>
<script src="/public/mobile/js/public.js"></script>
<script>
    $(document).ready(function(){

    });
    function getIOSVersion() {
        var agent = navigator.userAgent.toLowerCase() ;
        var version;
        if(agent.indexOf("like mac os x") > 0){
            //ios
            var regStr_saf = /os [\d._]*/gi ;
            var verinfo = agent.match(regStr_saf) ;
            version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
        }
        var version_str = version+"";
        if(version_str != "undefined" && version_str.length >0){
            version=version.substring(0,1);
            return version;
        }
    }

    $().ready(function () {
        var width=document.body.clientWidth;
        var height=document.body.clientHeight;
        $("body").css("height",height)
        var contentWidth=width * .84;
        $(".content").css("width",contentWidth)
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
       // if(isiOS){
        var countDown=0;
            document.body.addEventListener('touchmove', function (e) {
                e.preventDefault();

                /*$(".rank_box").scroll("top")
                var target=e.target,className = target.getAttribute("class");
                if(className==="name"||className==="num"||className==="energy"){
                    var tag = target.parentNode.tagName .toLowerCase()
                    if(tag!=="li"){
                        e.preventDefault();
                    }
                }else{
                    e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
                }*/
            },{passive: false});
        //}
        if(height/width>=1.70){
            //.content 红色背景高度
            $("body").css("backgroundImage","url('/public/mobile/img/rank_bgx.jpg')");
            $(".rank .content").css({minHeight:"auto",marginTop:"10vh"});
        }else{
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if(isiOS){
                //$(".rank_box").css("height","12.5rem")
            }

        }
        $.get("/index.php/api/Api/rank",function (res) {
            var r=JSON.parse(res)
            console.log("rank",r);
            if(r.code==200){
                var data=r.data,html='',len=data.length>10?10:data.length;
                for(var i=0;i<len;i++){
                    var number = parseInt(data[i].number);
                    if(number>0){
                        html+='<li><div class="num">No.'+(i+1)+'</div><div class="name">'+data[i].username+'</div> <div class="energy">'+number+'</div></li>'
                    }
                }
                $("#rankBox").html(html).css("opacity",0);
                setTimeout(function () {
                    var liHeight = parseInt(parseFloat($("#rankBox li").css("height"))* 10);
                    console.log("liHeight",liHeight);
                    var boxHeight=parseInt($(".rank_box").css("height"));
                    if(boxHeight>liHeight){
                        var liH=boxHeight/10;
                        //$("#rankBox li").css({height:liH,lineHeight:liH})
                    }else{
                       // $(".rank_box").css("height",liHeight);
                    }
                    $("#rankBox").css("opacity",1);
                },50)
            }
        })
        $("#again").on("touchstart",function () {
            location.href="/mobile/index/game.html"
        })
        $("#share").on("touchstart",function () {
            $(".share_box").removeClass("hide");
        })
        $(".share_box").on("touchstart",function () {
            $(this).addClass("hide")
        })
    })
</script>
    <script>
        // 微信配置
        wx.config({
            debug: false,
            appId: "{$signPackage['appId']}",
            timestamp: '{$signPackage["timestamp"]}',
            nonceStr: '{$signPackage["nonceStr"]}',
            signature: '{$signPackage["signature"]}',
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareQZone']
            // 功能列表，我们要使用JS-SDK的什么功能
        });

        //  var ShareLink = "http://{$_SERVER['HTTP_HOST']}"; //默认分享链接
        var ShareLink = "{$data_share['link']}"; //默认分享链接
        var ShareImgUrl ="{$data_share['imgUrl']}"; // 分享图标
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在 页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready 函数中。
        wx.ready(function(){
            // 获取"分享到朋友圈"按钮点击状态及自定义分享内容接口
            wx.onMenuShareTimeline({
                title: " {$data_share['title']}", // 分享标题
                link:ShareLink,
                imgUrl:ShareImgUrl ,// 分享图标
                success: function () {

                },
                cancel: function () {

                }
            });

            // 获取"分享给朋友"按钮点击状态及自定义分享内容接口
            wx.onMenuShareAppMessage({
                title: "{$data_share['title']}", // 分享标题
                desc: "{$data_share['desc']}", // 分享描述
                link:ShareLink,
                imgUrl:ShareImgUrl ,// 分享图标
                success: function () {

                },
                cancel: function () {

                    // 用户取消分享后执行的回调函数
                }
            });
            // 分享到QQ
            wx.onMenuShareQQ({
                title: "{$data_share['title']}", // 分享标题
                desc: "{$data_share['desc']}", // 分享描述
                link:ShareLink,
                imgUrl:ShareImgUrl ,// 分享图标
                success: function () {

                },
                cancel: function () {

                }
            });
            // 分享到QQ空间
            wx.onMenuShareQZone({
                title: "{$data_share['title']}", // 分享标题
                desc: "{$data_share['desc']}", // 分享描述
                link:ShareLink,
                imgUrl:ShareImgUrl ,// 分享图标
                success: function () {

                },
                cancel: function () {

                }
            });
        });
    </script>
    <script>
        var _mtac = {};
        (function() {
            var mta = document.createElement("script");
            mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
            mta.setAttribute("name", "MTAH5");
            mta.setAttribute("sid", "500690473");
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(mta, s);
        })();
    </script>
</body>
</html>